<template>
	<view class="container">
		<u-form :model="form" ref="uForm" label-width="120" :error-type="['toast']" >
			<u-form-item label="宝宝">
				<view class="children-view">
					<children-list-view  @showClasses="showClasses" :childrenList="childrenList"
						@itemClick="childrenItemClick"></children-list-view>
				</view>
			</u-form-item>
			<u-form-item label="合同标题" prop="name">
				<u-input placeholder="请输入标题" v-model="form.name" />
			</u-form-item>
			<u-form-item label="合同编号" prop="code">
				<u-input placeholder="请输入编号" v-model="form.code" />
			</u-form-item>
			<u-form-item label="合同时间" prop="date">
				<u-input type="select" placeholder="请输入编号" v-model="form.date" @click="rangeShow = true"/>
			</u-form-item>
			<u-form-item label="签约时间" prop="signDate">
				<u-input type="select" placeholder="请输入编号" v-model="form.signDate" @click="signShow = true"/>
			</u-form-item>
			<u-form-item label="购买产品">
				<!-- <u-input type="select" placeholder="请输入编号" v-model="form.eventTime" @click="productShow = true"/> -->
				<view class="time-view">
					<view v-for="(item, index) in productRecords" :key="index">
						<text>{{item.name}}</text>
						<u-icon name="trash" class="del" @click="delClick(index)"></u-icon>
					</view>
				</view>
				<u-icon slot="right" name="plus-circle" @click="productShow = true" size="48"></u-icon>
			</u-form-item>
			<u-form-item label="付款" prop="payType">
				<u-radio-group v-model="form.payType">
					<u-radio v-for="(item, index) in radioList" :key="index" :name="item.value"
						:disabled="item.disabled">
						{{ item.name }}
					</u-radio>
				</u-radio-group>
			</u-form-item>
			<u-form-item label="付款方式" prop="payChannelName">
				<u-input type="select" placeholder="请输入编号" v-model="form.payChannelName" @click="payChannelShow = true"/>
			</u-form-item>
			<u-form-item label="付款金额" prop="practicalAmount">
				<u-input placeholder="请输入编号" v-model="form.practicalAmount" />
			</u-form-item>
			<u-form-item label="备注" prop="remark">
				<u-input placeholder="请输入编号" v-model="form.remark" />
			</u-form-item>
		</u-form>
		<u-button class="action-view" @click="saveClick">保存</u-button>
		<children-select-view ref="popupConpare" @confirm="confirm" :single="true"></children-select-view>
		<u-calendar v-model="rangeShow" mode="range" max-date="2050-01-01" @change="rangeChange"></u-calendar>
		<u-calendar v-model="signShow" mode="date" max-date="2050-01-01" @change="signChange"></u-calendar>
		<u-select v-model="payChannelShow" :list="payChannelList" @confirm="payChannelConfirm"></u-select>

		<product-add-view :visible.sync="productShow" @confirm="productConfirm"></product-add-view>

	</view>
</template>

<script>
	import { addContract, getClienteleByChildrenId } from '@/api/clientele.js'
	import {
		mapState,
	} from 'vuex';
	import ChildrenListView from '@/components/children-list-view.vue'
	import ChildrenSelectView from '@/components/children-select-view.vue'
	import ProductAddView from '@/pages_operate/components/product-add-view.vue'
	export default {
		components: {
			ChildrenListView,
			ChildrenSelectView,
			ProductAddView
		},
		data() {
			return {
				form: {
					name: '',
					code: '',
					date: '',
					beginDate: '',
					endDate: '',
					signDate: '',
					payType: '',
					payChannel: '',
					payChannelName: '',
					practicalAmount: '',
					remark: ''
				},
				rules: {
					name: [{
						required: true,
						message: '请填写合同标题',
					}, ],
					code: [{
						required: true,
						message: '请填写合同编号',
					}, ],
					date: [{
						required: true,
						message: '请选择合同时间',
					}, ],
					signDate: [{
						required: true,
						message: '请选择签约时间',
					}, ],
					payType: [{
						required: true,
						message: '请选择付款类型',
					}, ],
					payChannelName: [{
						required: true,
						message: '请选择付款方式',
					}, ],
					practicalAmount: [{
						required: true,
						message: '请填写付款金额',
					}, ],
				},
				
				radioList: [{
						name: '定金',
						value: '1',
					},
					{
						name: '全款',
						value: '2',
					}
				],
				
				payChannelShow: false,
				payChannelList: [
					{
						value: '1',
						label: '现金'
					},
					{
						value: '2',
						label: '刷卡'
					},
					{
						value: '3',
						label: '银行转账'
					},
					{
						value: '4',
						label: '支付宝'
					},
					{
						value: '5',
						label: '微信'
					},
					{
						value: '6',
						label: '刷卡'
					}
				],
				
				childrenList: [],
				
				rangeShow: false,
				signShow: false,
				
				productShow: false,
				productRecords: []
			}
		},
		computed: {
			...mapState({
				tchInfo: state => state.user.tchInfo,
			}),
		},
		onLoad() {
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			showClasses() {
				this.$refs.popupConpare.open();
			},
			
			childrenItemClick(index) {
				this.childrenList.splice(index, 1);
			},
			confirm(res) {
				console.log(res);
				for (let index in res) {
					let item = res[index];
					if (this.childrenList.indexOf(item) === -1) {
						this.childrenList.push(item);
					}
				}
			},
			saveClick() {
				if (this.childrenList.length === 0) {
					this.$u.toast('请先选择宝宝');
					return;
				}
				
				
				this.$refs.uForm.validate(valid => {
					console.log(valid);
					if (valid) {
						this.getClientele(this.childrenList[0].id);
						return;
					}
				});
			},
			
			commit(clienteleId) {
				console.log(this.productRecords);
				console.log(this.form);
				const childName = this.childrenList[0].name;
				const areaId = this.tchInfo.area.id;
				// const clienteleId = '2c98d81f82fd50f9018310f4f48b0032';
				const params = {
					...this.form,
					productRecords: JSON.stringify(this.productRecords.map(x => {
					  return {
						productId: x.id,
						count: x.count,
						remark: x.remark || '',
						practicalAmount: x.discountAmount
					  }
					})),
					childName,
					areaId,
					clienteleId
				}
				console.log(params);
				
				addContract(params).then(res => {
					console.log(res);
					this.$u.toast('添加成功');
					setTimeout(function(){
						uni.navigateBack();
					},1000)
				})
			},
			
			productConfirm(res) {
				console.log(res);
				this.productRecords.push(res);
			},
			
			rangeChange(res) {
				console.log(res);
				const startDate = Date.parse(res.startDate);
				const endDate = Date.parse(res.endDate);
				const start = this.$u.timeFormat(startDate, 'yyyy/mm/dd');
				const end = this.$u.timeFormat(endDate, 'yyyy/mm/dd');
				this.form.date = start + '至' + end;
				this.form.beginDate = start;
				this.form.endDate = end;
			},
			
			signChange(res) {
				console.log(res);
				const startDate = Date.parse(res.result);
				this.form.signDate =this.$u.timeFormat(startDate, 'yyyy/mm/dd');
			},
			
			payChannelConfirm(res) {
				console.log(res);
				this.form.payChannel = res[0].value;
				this.form.payChannelName = res[0].label;
			},
			
			delClick(index) {
				this.productRecords.splice(index, 1)
			},
			
			getClientele(childrenId) {
				getClienteleByChildrenId({childrenId}).then(res => {
					console.log(res);
					this.commit(res.data.id);
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: $app-page-bg-color;
	}
</style>
<style lang="scss">
	@import '@/css/u-form.scss';
	.container {
		padding-left: 30rpx;
		padding-right: 30rpx;
		display: flex;
		flex-direction: column;
	}
	
	.children-view {
		width: 10rpx;
		flex: 1;
		display: flex;
		flex-direction: row;
	}
	
	.popup{
		padding: 30rpx;
	}
</style>
